<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-[#1E88E5] shadow-sm">
      <div class="container mx-auto flex h-16 items-center justify-between px-6">
        <div class="flex items-center space-x-4">
          <div class="text-lg font-medium text-white">房间管理</div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="relative">
            <input
                type="text"
                placeholder="搜索房间..."
                class="h-10 rounded-full border border-gray-300 pl-10 pr-4 text-sm focus:border-indigo-500 focus:outline-none"
            />
            <el-icon class="absolute left-3 top-2.5 text-gray-400">
              <Search />
            </el-icon>
          </div>
          <button class="!rounded-button whitespace-nowrap flex items-center space-x-1 bg-[#0D47A1] px-4 py-2 text-sm text-white">
            <el-icon><Filter /></el-icon>
            <span>筛选</span>
          </button>
        </div>
      </div>
    </header>
    <!-- 筛选区域 -->
    <div class="bg-[#E3F2FD] py-4">
      <div class="container mx-auto px-6">
        <div class="flex flex-wrap items-center gap-4">
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">价格区间：</span>
            <div class="flex items-center space-x-2">
              <input
                  type="text"
                  placeholder="最低价"
                  class="h-8 w-20 rounded border border-gray-300 px-2 text-sm focus:border-indigo-500 focus:outline-none"
              />
              <span class="text-gray-400">-</span>
              <input
                  type="text"
                  placeholder="最高价"
                  class="h-8 w-20 rounded border border-gray-300 px-2 text-sm focus:border-indigo-500 focus:outline-none"
              />
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">房型：</span>
            <div class="flex space-x-2">
              <button
                  v-for="type in roomTypes"
                  :key="type.value"
                  class="!rounded-button whitespace-nowrap h-8 rounded-full px-3 text-sm"
                  :class="{
                    'bg-[#1E88E5] text-white': selectForm.type === type.value,
                    'bg-white text-gray-700 border border-gray-300': selectForm.type !== type.value,
                    }"
                  @click="selectRoomType(type.value)"
              >
                {{ type.label }}
              </button>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">楼层：</span>
            <div class="flex space-x-2">
              <button
                  v-for="floor in floors"
                  :key="floor"
                  class="!rounded-button whitespace-nowrap h-8 rounded-full px-3 text-sm"
                  :class="{
                  'bg-[#1E88E5] text-white': selectForm.height === floor,
                  'bg-white text-gray-700 border border-gray-300': selectForm.height !== floor,
                  }"
                  @click="selectFloor(floor)"
              >
                {{ floor }}层
              </button>
              <button
                  class="!rounded-button whitespace-nowrap h-8 rounded-full px-3 text-sm"
                  :class="{
                  'bg-[#1E88E5] text-white': selectForm.height === null,
                  'bg-white text-gray-700 border border-gray-300': selectForm.height !== null,
                  }"
                  @click="selectFloor(null)"
              >
                不限
              </button>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">朝向：</span>
            <div class="flex space-x-2">
              <button
                  v-for="orientation in orientations"
                  :key="orientation.value"
                  class="!rounded-button whitespace-nowrap h-8 rounded-full px-3 text-sm"
                  :class="{
                  'bg-[#1E88E5] text-white': selectForm.width === orientation.value,
                  'bg-white text-gray-700 border border-gray-300': selectForm.width !== orientation.value,
                  }"
                  @click="selectOrientation(orientation.value)"
              >
                <el-icon class="mr-1">
                  <component :is="orientation.icon" />
                </el-icon>
                {{ orientation.label }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主要内容区域 -->
    <main class="container mx-auto px-6 py-8">
      <!-- 房间列表 -->
      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div
            v-for="room in rooms"
            :key="room.rid"
            class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md"
            @click="gotoRoomDetail(room.rid)"
        >
          <div class="relative h-48 overflow-hidden">
            <img
                :src="`${SERVER_ADDR}/upload/${room.pic}`"
                class="h-full w-full object-cover object-center"
                alt="房间图片"
            />
            <div
                class="absolute right-2 top-2 rounded-full px-2 py-1 text-xs font-medium"
                :class="{
                'bg-green-100 text-green-800': room.rstate === 1,
                'bg-gray-100 text-gray-800': room.rstate === 2,
                }"
            >
              {{ room.rstate === 1 ? '空闲' : '维修中' }}
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-start justify-between">
              <div>
                <h3 class="text-lg font-medium text-gray-900">{{ room.type === 1 ? '单人房' : '双人房' }}</h3>
                <p class="text-sm text-gray-500">房间号: {{ room.rno }}</p>
              </div>
              <div class="text-right">
                <p class="text-sm text-gray-500">朝向{{ room.width }}</p>
                <p class="text-sm text-gray-500">{{ room.height }}层</p>
              </div>
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center space-x-1">
                <el-icon class="text-gray-400">
                  <Location />
                </el-icon>
              </div>
              <div class="text-right">
                <p class="text-xs text-gray-500">月租</p>
                <p class="text-xl font-bold text-[#1E88E5]">¥{{ room.rmoney }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="mt-8 flex justify-center">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next"
            background
        />
      </div>
    </main>
  </div>
</template>
<script lang="js" setup>
import { ref, computed } from 'vue';
import {
  Search,
  Filter,
  Location,
} from '@element-plus/icons-vue';
import roomApi from "@/api/admin/roomApi.js";
import {useRouter} from "vue-router";

const router = useRouter();
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
// 筛选条件
const selectForm = ref({
  rstate: 1,
  type: '',
  height: '',
  width: '',
});
const roomTypes = [
  { label: '全部', value: null },
  { label: '标准单人间', value: 1 },
  { label: '标准双人间', value: 2 },
];
const floors = ['1', '2', '3', '4', '5', '6', '7', '8'];
const orientations = [
  { label: '全部', value: null, icon: 'ScaleToOriginal' },
  { label: '南向', value: 1, icon: 'Sunny' },
  { label: '北向', value: 2, icon: 'Moon' },
  { label: '东向', value: 3, icon: 'Position' },
  { label: '西向', value: 4, icon: 'WindPower' },
];
// 房间数据
const rooms = ref([]);
// 筛选后的房间列表
const currentPage = ref(1);
const pageSize = ref(6);
const total = ref(0);

const selectedRoom = ref(null);
// 获取空闲房间信息
const getRooms = () => {
  roomApi.selectByPage(currentPage.value, pageSize.value, selectForm.value)
  .then(resp => {
    if (resp.code == 10000){
      rooms.value = resp.data.data;
      total.value = resp.data.total;
    }

  })
};
// 选择朝向
const selectOrientation = (orientation) => {
  selectForm.value.width = orientation;
  getRooms();
};
// 选择房间类型
const selectRoomType = (type) => {
  selectForm.value.type = type;
  getRooms();
};
// 选择楼层
const selectFloor = (floor) => {
  selectForm.value.height = floor;
  getRooms();
};
// 跳转房间详情界面
const gotoRoomDetail = (id) => {
  router.push({
    path: '/roomdetail',
    query: {
      id: id,
    },
  })
};
getRooms();
</script>
<style scoped>
.room-detail-dialog {
  max-width: 1200px;
}
</style>
